{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_list %}

{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/manager_ribbon.css' %}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="{% static 'results-manager/images_gallery.css' %}">

<link rel="stylesheet" type="text/css" href="css/light<a href="https://www.jqueryscript.net/slider/">Slider</a>.css">
{% endblock %}


{% block breadcrumbs %}
{{ block.super }}
<div class="ribbon">
    <a id = "alyx-link" href='{{ back_url }}'>Open in Alyx</a>
</div>
{% endblock %}

{% block content %}
    {{block.super}}    
    <div>
    {% for group in image_groups %}
        <div id="carousel_{{ forloop.counter }}" class="carousel slide" data-ride="carousel" data-interval="false">
            <div class="carousel-inner">
                {% for image in group %}
                    <div class="carousel-item {% if forloop.first %}active{% endif %}">
                        <div class="carousel-group">{{ image.filename }}</div>
                        <div class="carousel-viewer" id="imageContainer">
                            <img src="{{ image.path }}" alt="{{ image.filename }}" class="d-block">
                        </div>
                        <div class="carousel-caption">{{ image.filename }}</div>
                    </div>
                {% endfor %}
            </div>
            {% if group|length > 1 %}
                <a class="carousel-control-prev" href="#carousel_{{ forloop.counter }}" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carousel_{{ forloop.counter }}" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            {% endif %}
            <!-- TODO : make the caroussels navigable by up down arrows -->
        </div>
    {% endfor %}  
    </div>
    


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function() {
        $('.carousel').carousel();
        console.log("FESSES");
    });

    $(document).ready(function() {
    $('.carousel-group').each(function () {
        const captionText = $(this).text().split('.')[1] || "";
        $(this).text(captionText);
    });
    });
</script>
{% endblock %}

{% block title %}
{{ title|striptags }}
{% endblock %}